<template>
    <div class="wrapper">
		<el-form>
			<el-form-item label="价格筛选: ">
				<el-input v-model="formData.minPrice" placeholder="最低价格" style="width: 80px; margin-right: 20px;"></el-input>
				-
				<el-input v-model="formData.maxPrice" placeholder="最高价格" style="width: 80px; margin-left: 20px;"></el-input>
				<el-button type="primary" plain style="margin-left: 20px;">确认</el-button>
			</el-form-item>
			<el-form-item label="筛选排序: " >
				<el-link :underline="false" style="margin-right: 10px;">销量</el-link>
				<el-popover
					trigger="hover"
					title="排序方式"
					:width="80"
				>
					<template #reference>
						<el-link :underline="false">价格</el-link>
					</template>
					<el-link :underline="false">从低到高排序</el-link>
					<el-link :underline="false">从高到低排序</el-link>
				</el-popover>
			</el-form-item>
		</el-form>
		
		
		<div class="goods">
			<el-card style="max-width: 248px;">
				<img
				      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
				      style="width: 100%"
				    />
				<template #footer>
					<span class="price-icon">￥</span>
					<span class="price">10.00</span>
					<br/>
					<span>塔斯汀中国汉堡</span>
				</template>
			</el-card>
		</div>
		
		<el-pagination 
			background 
			layout="total, sizes, prev, pager, next, jumper"
			:total="40"
			v-model:current-page="params.pageNo"
			style="margin-top: 20px;"
		></el-pagination>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import { get } from '@/plugins/axios'


const formData = reactive({
	maxPrice: '',
	minPrice: '',
	priceOrder: null,
	salesOrder: null
})
const params = reactive({
	pageNo: 1,
	pageSize: 5
})

</script>

<style lang="scss" scoped>
$tableBorder: 1px solid #cecece;
.wrapper{
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
	.el-form{
		border: $tableBorder;
		.el-form-item{
			padding: 6px;
			margin-bottom: 0;
			border: $tableBorder;
		}
	}
	.goods{
		margin-top: 50px;
	}
}
.price-icon{
	color: #ff6200;
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
}
.price{
	color: #ff6200;
	font-size: 24px;
	font-weight: 700;
	line-height: 36px;
	font-family: AlibabaSans102v1TaoBao-Bold,Alibaba-Sans102,PingFangSC-Regular;
}
</style>